<template>
	<div class="container">
		<div class="title-container">
			<p class="title">应用墙</p>
		</div>
		<div class="divider"></div>
		<div class="flex-container">
			<div class="item">
				<a href="/introduction">
					<Icon type="md-calendar" color="green" size="25"/>
					<span>个人介绍</span>
				</a>
			</div>
			<div class="item">
				<a href="">
					<Icon type="logo-usd" color="rgb(255, 184, 0)" size="25"/>
					<span>打赏站长</span>
				</a>
			</div>
			<div class="item">
				<a href="">
					<Icon type="ios-body" color="rgb(1, 170, 237)" size="25"/>
					<span>好友链接</span>
				</a>
			</div>
			<div class="item">
				<a href="/animations">
					<Icon type="ios-paw" color="rgb(242, 93, 142)" size="25"/>
					<span>我追的番</span>
				</a>
				
			</div>
			<div class="item">
				<a href="">
					<Icon type="ios-game-controller-b" color="rgb(242, 93, 142)" size="25"/>
					<span>我喜欢玩的游戏</span>
				</a>
				
			</div>
			<div class="item">
				<a href="">
					<Icon type="ios-chatboxes" color="#2d8cf0" size="25"/>
					<span>弹幕留言墙</span>
				</a>
				
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		name: 'Notice'
	}
</script>

<style scoped>
.container{
	width: 100%;
	background-color: white;
	border-radius: 10px;
}

.title-container{
	padding-top: 15px;
	margin-left: 15px;
}

.title{
	font-size: 18px;
	font-weight: 800;
}

.divider{
	margin: auto;
	margin-top: 5px;
	height: 1px;
	width: 90%;
	background-color: rgba(0,0,0,0.2);
}

.flex-container{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	padding: 0px 20px 20px 20px;
}

.item{
	width: 50%;
	margin-top: 10px;
	cursor: pointer;
}

.item a{
	color: #515a6e;
}

.item span{
	display: inline-block;
	font-size: 16px;
	margin-left: 5px;
}

</style>